<template>
    <el-card class="box-card">
        <div>筛选搜索</div>
        <div class="three">
            <div>
                <span>广告名称:</span><el-input v-model="input" placeholder="广告名称" clearable class="input" />
            </div>
            <div>
                <span>广告位置:</span><el-select v-model="value" placeholder="广告位置" class="choose">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                        :disabled="item.disabled" />
                </el-select>
            </div>
            <div class="demo-date-picker">
                <div class="block">
                    <span class="demonstration">到期时间：</span>
                    <el-date-picker v-model="value2" type="date" placeholder="Pick a day" :disabled-date="disabledDate"
                        :shortcuts="shortcuts" :size="size" />
                </div>
            </div>
        </div>
    </el-card>

    <el-card class="box-card romote">
        <div class="two">
            <div>数据列表</div>
            <el-button @click="toaddAdvertise">添加广告</el-button>
        </div>
    </el-card>

    <div class="table">
        <!-- 数据的展示 -->
        <el-table :data="getAd.list" style="width: 100%" :border="true">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="编号" width="50" />
            <el-table-column prop="name" label="广告名称" width="300" />
            <el-table-column prop="type" label="广告位置" width="300" />

            <el-table-column prop="pic" label="广告图片" width="280">
                <template #default="scope">
                    <img :src="scope.row.pic" alt="" style="height: 80px;" />
                </template>
            </el-table-column>

            <!-- 自定义列模板 -->
            <el-table-column label="时间" width="180" prop="startTime,endTime">
                <!-- slot 插槽写法  scope就是作用域插槽 ， scope.row 就是数据 -->
                <template #default="scope">
                    <div>
                        开始时间：{{
                            scope.row.startTime
                            ? dayjs(scope.row.startTime).format("YYYY-MM-DD HH:mm:ss")
                            : "/"
                        }}
                    </div>
                    <div>
                        到期时间：{{
                            scope.row.endTime
                            ? dayjs(scope.row.endTime).format("YYYY-MM-DD HH:mm:ss")
                            : "/"
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="上线/下线" width="80">
                <template #default="scope">
                    <el-switch :value="scope.row.status === 1 ? true : false" />
                </template>
            </el-table-column>
            <el-table-column prop="clickCount" label="点击次数" width="90" />
            <el-table-column prop="orderCount" label="生成订单" width="110" />
            <el-table-column label="操作" width="170" flex="right">
                <template #default="scope">
                    <el-button>编辑</el-button>
                    <el-button @click="onEdit(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import * as api from '../../request/api'

import type { IAdvertise } from "../../request/smshomeAdvertise/index";
import { useRoute, useRouter } from "vue-router";

import { onMounted, reactive, ref } from "vue";
import dayjs from "dayjs";

const input = ref("");
const value = ref("");
const options = [
    {
        value: "Option1",
        label: "PC首页轮播",
    },
    {
        value: "Option2",
        label: "App首页轮播",
        disabled: true,
    },
    {
        value: "Option3",
        label: "胡浩小姐姐黑丝轮播",
    },
];
const size = ref<"default" | "large" | "small">("default");

const value1 = ref("");
const value2 = ref("");
const pageNum = ref("");
const pageSize = ref("");
const shortcuts = [
    {
        text: "Today",
        value: new Date(),
    },
    {
        text: "Yesterday",
        value: () => {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            return date;
        },
    },
    {
        text: "A week ago",
        value: () => {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            return date;
        },
    },
];
const disabledDate = (time: Date) => {
    return time.getTime() > Date.now();
};
let getAd = reactive({
    list: [],
});
//发请求
onMounted(async () => {
    let res = await api.homeAdvertise.homeAdvertise({ pageNum, pageSize });
    getAd.list = res.list;
    console.log(getAd);
});
//点击按钮跳转到添加广告页面
let router = useRouter();
function toaddAdvertise() {
    console.log("我要跳转");

    router.push({
        path: "/sms/addAdvertise",
    });
}
let onEdit = (val: any) => {

} 
</script>

<style scoped>
.input {
    width: 200px;
    height: 30px;
    margin-left: 20px;
}

.choose {
    margin-left: 20px;
}

.three {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}

.two {
    display: flex;
    justify-content: space-between;
}

.romote {
    margin-top: 20px;
    margin-bottom: 20px;
}
</style>